---
layout: single
property_name: transform-origin
---

<section id="transform-origin" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/transform-origin/" data-property-name="transform-origin" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="transform-origin">Share</a>
        <a target="_blank" href="http://caniuse.com/#feat=transforms3d" data-tooltip="See on Can I use..." rel="external">Can I use</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/transform-origin" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#transform-origin"><span>#</span>transform-origin</a>
    </h2>
    <div class="property-description">
      <p>Defines the origin for transformations defined by the <code class="shorthand"><a href="http://cssreference.io/#transform">transform</a></code> property.</p>

    </div>

      <div class="property-animation">
        <a class="button property-animation-toggle" data-property-name="transform-origin"></a>
      </div>
  </header>


    <style type="text/css">.transform-origin.is-animated .block--alpha { animation-name: rotateFull; }</style>

    <style type="text/css">.transform-origin .block { height: 100px;width: 100px; }.transform-origin .block--container { padding: 0;position: relative; }.transform-origin .block--alpha { align-items: center;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: linear;display: flex;justify-content: center; }.transform-origin .origin { background: hsl(348, 100%, 61%);border-radius: 290486px;height: 10px;margin: -5px 0 0 -5px;position: absolute;width: 10px; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform-origin: 50% 50% 0;">transform-origin: 50% 50% 0;</code>
        </p>
        <div class="example-description">
          <p>The transform origin is in the <strong>center</strong> of the element.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform-origin " id="transform-origin-50-50-0"><div class="block block--container"><p class="block block--alpha"><span class="origin"></span>Hello world</p></div></div>
        </div>
      </aside>
          <style type="text/css">#transform-origin-50-50-0{ transform-origin:50% 50% 0;}</style>
        <style type="text/css">#transform-origin-50-50-0 .origin { left: 50%;top: 50%; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform-origin: 20px 70%;">transform-origin: 20px 70%;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>2 values</strong>:</p>
<ul><li>the first value is the <strong>horizontal</strong> axis</li><li>the second is the <strong>vertical</strong> axis</li></ul>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform-origin " id="transform-origin-20px-70"><div class="block block--container"><p class="block block--alpha"><span class="origin"></span>Hello world</p></div></div>
        </div>
      </aside>
          <style type="text/css">#transform-origin-20px-70{ transform-origin:20px 70%;}</style>
        <style type="text/css">#transform-origin-20px-70 .origin { left: 20px;top: 70%; }#transform-origin-20px-70 .block--alpha { transform-origin: 20px 70%; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform-origin: top right;">transform-origin: top right;</code>
        </p>
        <div class="example-description">
          <p>You can use a combination of <strong>position keywords</strong>: <code>center</code>, <code>top</code>, <code>bottom</code>, <code>left</code> and <code>right</code>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform-origin " id="transform-origin-top-right"><div class="block block--container"><p class="block block--alpha"><span class="origin"></span>Hello world</p></div></div>
        </div>
      </aside>
          <style type="text/css">#transform-origin-top-right{ transform-origin:top right;}</style>
        <style type="text/css">#transform-origin-top-right .origin { left: 100%;top: 0; }#transform-origin-top-right .block--alpha { transform-origin: top right; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform-origin: center bottom;">transform-origin: center bottom;</code>
        </p>
        <div class="example-description">
          <p>When using keywords, you can change the <strong>order</strong> of the axis, as long as each keywords is unambiguous.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform-origin " id="transform-origin-center-bottom"><div class="block block--container"><p class="block block--alpha"><span class="origin"></span>Hello world</p></div></div>
        </div>
      </aside>
          <style type="text/css">#transform-origin-center-bottom{ transform-origin:center bottom;}</style>
        <style type="text/css">#transform-origin-center-bottom .origin { left: 50%;top: 100%; }#transform-origin-center-bottom .block--alpha { transform-origin: center bottom; }</style>
    </section>

</section>
